<template>
  <div>
    <add-power />
    <div class="app-container">
      <el-table
        v-loading="listLoading"
        :data="list"
        element-loading-text="加载中"
        border
        fit
        highlight-current-row
      >
        <el-table-column align="center" label="权限名称" width="120">
          <template slot-scope="scope">
            {{ scope.row.powerName }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="角色ID" width="120">
          <template slot-scope="scope">
            {{ scope.row.powerCode }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="权限菜单" width="400">
          <template slot-scope="scope">
            {{ scope.row.menuName.join() }}
          </template>
        </el-table-column>
        <el-table-column class-name="status-col" label="操作" align="center">
          <template slot-scope="scope">
            <el-button type="primary" round size="small" @click="handleEditorClick(scope.row)">编辑</el-button>
            <el-button type="danger" round size="small" @click="handleRemoveClick(scope.row.powerCode)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <modify-power :modify-power="modifyPower" :row="row" @closeEdit="closeEdit" />
    </div>
  </div>
</template>
<script>
import { getPowerList, removePower } from '@/api/power'
import addPower from './components/addPower'
import modifyPower from './components/modifyPower'
export default {
  components: {
    addPower,
    modifyPower
  },
  data() {
    return {
      list: null,
      listLoading: true,
      modifyPower: false,
      row: null
    }
  },
  created() {
    this.getList()
  },
  methods: {
    // 获取角色列表
    getList() {
      getPowerList().then(res => {
        if (res.resultCode === '0000') {
          res.data.list.forEach(val => {
            const menuList = []
            const menuCode = []
            val.powerArr.forEach(res => {
              menuList.push(res.menuName)
              menuCode.push(res.menuId)
            })
            val.menuName = menuList
            val.powerId = menuCode
          })
          this.list = res.data.list
        }
        this.listLoading = false
      })
    },
    // 编辑角色
    handleEditorClick(row) {
      this.modifyPower = true
      this.row = row
    },
    // 删除角色
    handleRemoveClick(id) {
      removePower(id).then(res => {
        if (res.resultCode === '0000') {
          this.getList()
        }
      })
    },
    closeEdit() {
      this.modifyPower = false
    }
  }
}
</script>
<style scoped>
  .el-button+.el-button{
    margin-left: 0;
  }
</style>
